<template>
	<view class="lease-goods-container">
		<!-- Header -->
		<view class="header">
			<!-- 吸顶栏 -->
			<u-sticky offset-top="0" h5-nav-height="0">
				<!-- 搜索 -->
				<view class="search row">
					<u-search class="flex1" v-model="keyword" :focus="showHistory" @focus="showHistory = true"
						@search="onSearch" bg-color="#F4F4F4" />
					<view class="search--cancel" v-show="showHistory" @tap="onCancelSearch">取消</view>
				</view>
			</u-sticky>
		</view>

		<!-- 搜索历史 -->
		<view v-show="showHistory" class="bg-white search-container">
			<view v-if="hotList.length" class="search-content">
				<view class="search-title">热门搜索</view>
				<view class="search-item row wrap">
					<block v-for="(item, index) in hotList" :key="index">
						<view class="search-words br60 mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">
							{{ item }}
						</view>
					</block>
				</view>
			</view>
			<view v-if="historyList.length" class="search-content">
				<view class="search-title row-between">
					<view>历史搜索</view>
					<view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchHistory">清空</view>
				</view>
				<view class="search-item row wrap">
					<block v-for="(item, index) in historyList" :key="index">
						<view class="search-words br60 mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">
							{{ item }}
						</view>
					</block>
				</view>
			</view>
			<view class="search-mask" @tap="onCancelSearch"></view>
		</view>

		<!-- Main -->
		<view class="main" v-show="!showHistory">
			<!-- 商品分类 -->
			<view class="goods-class-wrap" v-if="!brandId">
				<view class="goods-class-content">
					<block v-for="item in leaseClassifyList" :key="item.id">
						<view class="goods-class-item" @tap="onClassify(item.id)">
							<view class="goods-class-item-picture" :class="{
                                    'goods-class-item-picture--active': classify_id == item.id
                                }">
								<u-image width="100" height="100" shape="circle" :src="item.image" />
							</view>
							<view :style="{ color: classify_id == item.id ? '#24A3FF' : '#333333' }" class="line-1">
								{{ item.name }}
							</view>
						</view>
					</block>
				</view>
			</view>
			<swipers v-if="classify_id" :pid="27" height="267rpx" previous-margin="0" padding="20rpx 0 0"
				radius="10rpx"></swipers>
			<!-- 商品排序方式 -->
			<view v-show="classify_id!=0 || brandId" class="sort-nav row bg-white mt20">
				<!-- 综合 -->
				<view :class="'sort-tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
				<!-- 价格 -->
				<view class="sort-tag row-center" data-type="priceSort" @tap="onPriceSort">
					<text :class="priceSort ? 'primary' : ''">价格</text>
					<view>
						<trigonometry direction="up" size="small"
							:color="priceSort == 'desc' ? 'var(--primary-color)' : '#333'" />
						<trigonometry size="small" :color="priceSort == 'asc' ? 'var(--primary-color)' : '#333'" />
					</view>
				</view>
				<!-- 销量 -->
				<view class="sort-tag row-center" data-type="saleSort" @tap="onSaleSort">
					<text :class="saleSort ? 'primary' : ''">销量</text>
					<view>
						<trigonometry direction="up" size="small"
							:color="saleSort == 'desc' ? 'var(--primary-color)' : '#333'" />
						<trigonometry size="small" :color="saleSort == 'asc' ? 'var(--primary-color)' : '#333'" />
					</view>
				</view>
				<!-- 商品排序展示方式 -->
				<view class="sort-type row-center" @tap="changeType">
					<image class="icon-sm" :src="
                            goodsType === 'one'
                                ? '/static/images/icon_double.png'
                                : '/static/images/icon_one.png'
                        " />
				</view>
			</view>

			<!-- 商品列表 -->
			<view v-show="classify_id!=0 || brandId" class="goods-list-wrap">
				<!-- 商品样式1 -->
				<view v-show="goodsType == 'one'">
					<view class="goods-container-one">
						<block v-for="(item, index) in goodsList" :key="item.id">
							<view class="goods-item-one" @tap="goGoodsDetail(item)">
								<!-- Image -->
								<view style="width: 220rpx;height: 220rpx;position: relative;">
									<u-image width="220" height="220" border-radius="4px" :src="item.image" />
									<image v-if="item.lease_goods.is_pt==1" src="@/static/images/zy_logo.png"
										class="tag-box" mode="widthFix"></image>
								</view>

								<view class="goods-info" style="width: calc(100% - 220rpx);">
									<!-- Name -->
									<view class="row" style="width: 100%;gap: 10rpx;">
										<view v-if="item.lease_goods.is_pt==1||item.lease_goods.is_pt==0"
											class="lease-icon">租</view>
										<view
											v-if="item.lease_goods.is_pt==3||item.lease_goods.is_pt==1||item.lease_goods.is_pt==0"
											class="sale-icon">售</view>
										<view class="goods-name line1" style="flex: 1;">{{
                                            item.name
                                        }}</view>
									</view>
									<!-- Tag -->
									<view class="row mt10">
										<view class="goods-tag mr30">
											“已有{{item.buy_num}}次购买”
										</view>
										<view class="goods-tag" v-if="item.lease_goods.is_pt!=3">
											“已有{{item.lease_goods.lease_num}}次租赁”
										</view>
									</view>
									<!-- Price -->
									<view class="ornament goods-price" style="margin-top: 10rpx;">
										<view>
											<text class="xs">¥</text>
											<!-- 整数 -->
											<text class="xxl">{{
                                                formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'integer')
                                            }}</text>
											<!-- 小数 -->
											<text class="xs">{{
                                                formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'decimals')
                                            }}</text>
											<!-- 单位 -->
											<text v-if="item.lease_goods.is_pt!=3" class="xs">/天</text>
										</view>
										<deposit-tag v-if="item.lease_goods.is_pt!=3" :price="item.price"></deposit-tag>
										<view v-if="item.lease_goods.is_pt==3" class="line-through muted">
											￥{{item.market_price}}
										</view>
										<image v-if="item.lease_goods.is_pt==3" src="@/static/images/you.png"
											mode="widthFix" style="width: 40rpx;"></image>
									</view>
									<view class="row mt10" style="gap:20rpx">
										<view v-if="item.lease_goods.is_pt!=3" @click.stop="goGoodsDetailForBtn(1,item)"
											class="user-btn" style="--color:#3fd57b">
											立即租赁
										</view>
										<view @click.stop="goGoodsDetailForBtn(2,item)" class="user-btn"
											style="--color:var(--primary-color)">
											立即购买
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>

				<!-- 商品样式2 -->
				<view v-show="goodsType == 'double'">
					<view class="goods-container-double">
						<block v-for="(item, index) in goodsList" :key="item.id">
							<view class="goods-item-double" @tap="goGoodsDetail(item)">
								<!-- Image -->
								<!-- <u-image width="345" height="345" :src="item.image" /> -->
								<view style="width: 345rpx;height: 345rpx;position: relative;">
									<u-image width="345" height="345" :src="item.image" />
									<!-- <u-image width="220" height="220" border-radius="4px" :src="item.image" /> -->
									<image v-if="item.lease_goods.is_pt==1" src="@/static/images/zy_logo.png"
										class="tag-box" mode="widthFix"></image>
								</view>

								<view class="goods-info">
									<!-- Name -->
									<view class="row" style="gap: 10rpx;">
										<view v-if="item.lease_goods.is_pt==1||item.lease_goods.is_pt==0"
											class="lease-icon">租</view>
										<view
											v-if="item.lease_goods.is_pt==3||item.lease_goods.is_pt==1||item.lease_goods.is_pt==0"
											class="sale-icon">售</view>
										<view class="goods-name line1">{{ item.name }}</view>
									</view>
									<!-- Tag -->
									<view class="row mt10">
										<text class="goods-tag" v-if="item.lease_goods.is_pt!=3">
											“已有{{item.lease_goods.lease_num}}次租赁”
										</text>
										<text class="goods-tag" v-else>
											“已有{{item.buy_num}}次购买”
										</text>
									</view>
									<!-- Price -->
									<view class="ornament goods-price">
										<view>
											<text class="xs">¥</text>
											<!-- 整数 -->
											<text class="xxl">{{
											    formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'integer')
											}}</text>
											<!-- 小数 -->
											<text class="xs">{{
											    formatPrice(item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price, 'decimals')
											}}</text>
											<!-- 单位 -->
											<text v-if="item.lease_goods.is_pt!=3" class="xs">/天</text>
										</view>
										<deposit-tag v-if="item.lease_goods.is_pt!=3" :price="item.price"></deposit-tag>
										<view v-if="item.lease_goods.is_pt==3" class="line-through muted">
											￥{{item.market_price}}
										</view>
										<image v-if="item.lease_goods.is_pt==3" src="@/static/images/you.png"
											mode="widthFix" style="width: 40rpx;"></image>
									</view>
									<view class="row mt20" style="gap:20rpx">
										<view v-if="item.lease_goods.is_pt!=3" @click.stop="goGoodsDetailForBtn(1,item)"
											class="user-btn" style="--color:#3fd57b">
											立即租赁
										</view>
										<view @click.stop="goGoodsDetailForBtn(2,item)" class="user-btn"
											style="--color:var(--primary-color)">
											立即购买
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<loading-footer v-show="classify_id!=0" :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" :src="imgUrl+'images/goods_null.png'"></image>
					<text class="lighter">暂无商品</text>
				</view>
			</loading-footer>

			<view v-if="classify_id==0" class="brand-recommend">
				<view class="lg">
					品牌推荐
				</view>
				<view class="row mt20 wrap" style="gap:52rpx">
					<view v-for="item in leaseClassifyList[0].sons[0].sons" :key="item.id" style="width: 130rpx;"
						@tap="jumpBrandPage(item)">
						<u-image width="100%" height="130rpx" mode="aspectFit" shape="circle"
							:src="item.image"></u-image>
						<view class="mt10 row-center">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		// getLeaseClassify,
		getGoodsList
	} from '@/api/lease.js'

	import {
		getSearchpage,
		getCatrgory,
		clearSearch
	} from '@/api/store'

	import {
		loadingFun,
		formatPrice
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'

	export default {
		data() {
			return {
				keyword: '', // 搜索内容
				status: loadingType.LOADING, // 加载状态
				page: 1, // 当前数据页面
				goodsType: 'one', // 商品列表样式展示方式
				goodsList: [], // 商品列表数据
				priceSort: '', // 价格排序
				saleSort: '', // 销量排序
				classify_id: null, // 分类ID
				showHistory: false, // 显示搜索历史
				historyList: [], // 搜索历史数据列表
				hotList: [], // 热门搜素数据列表
				leaseClassifyList: [], // 租赁分类列表
				brandId: null, //品牌id
				type: 'pt', //参数平台字段
			}
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
			// 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun()
			}
		},
		computed: {
			comprehensive() {
				const priceSort = this.priceSort
				const saleSort = this.saleSort

				return !priceSort && !saleSort ? true : false
			}
		},

		onLoad(options) {
			const {
				brandid,
				name,
				type
			} = options;
			if (brandid) {
				uni.setNavigationBarTitle({
					title: name
				})
				this.type = type || this.type;
				this.brandId = brandid;
				this.getGoodsList()
				return;
			}
			// 获取分类列表数据
			getCatrgory().then((res) => {
				if (res.code != 1) return
				this.leaseClassifyList = res.data
				this.classify_id = res.data[1].id || '';
				// 商品列表数据请求
				this.getGoodsList()
			})
		},

		// 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList()
		},

		methods: {
			jumpBrandPage(item) {
				uni.navigateTo({
					url: `/package_goods/pages/company_good_list/company_good_list?brandid=${item.id}&name=${item.name}`
				})
			},
			// 格式化价格输出
			formatPrice,

			// 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

			// 清空搜索记录
			clearSearchHistory() {
				clearSearch().then((res) => {
					if (res.code != 1) return
					this.getSearchpageFun()
				})
			},

			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false
				// this.onRefresh();
			},

			// 点击分类
			onClassify(goods_id) {
				this.classify_id = goods_id
				if (goods_id == 0) return;
				this.onRefresh()
			},

			// 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh()
			},

			// 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh()
			},

			// 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh()
			},

			// 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then((res) => {
					if (res.code != 1) return
					const data = res.data
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				})
			},

			// 搜索
			onSearch() {
				this.onRefresh()
			},

			// 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList())
			},

			// 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh()
			},

			// 获取商品列表数据
			getGoodsList() {
				if (this.status == loadingType.FINISHED) return
				// 参数
				const field = {
					category_id: this.classify_id,
					keyword: this.keyword,
					price: this.priceSort,
					sales_sum: this.saleSort,
					type: this.type, //商城字段
					brand_id: this.brandId
				}
				// 请求
				loadingFun(getGoodsList, this.page, this.goodsList, this.status, field).then(
					(res) => {
						console.log(res)
						if (!res) return
						this.page = res.page
						this.goodsList = res.dataList
						this.status = res.status
					}
				)
			},

			// 查看商品详情
			goGoodsDetail(item) {
				if (item.lease_goods.is_pt != 3) return uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item
						.lease_goods.id
				});
				uni.navigateTo({
					url: '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				})
			},
			goGoodsDetailForBtn(type, item) {
				let url = '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item.lease_goods.id
				if (type == 2)
					url = '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped>
	.brand-recommend {
		border-radius: 24rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.search {
		position: relative;
		z-index: 1;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
	}

	.search--cancel {
		/* padding: 0 20rpx; */
		padding-right: 20rpx;
	}

	.main {
		padding: 20rpx;
	}

	.goods-class-wrap {
		/* box-sizing: border-box; */
		height: 200rpx;
		padding: 20rpx;
		border-radius: 10px;
		background-color: #ffffff;
	}

	.goods-class-content {
		display: flex;
		height: 100%;
		overflow: auto;
	}

	.goods-class-item {
		/* box-sizing: border-box; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		padding: 10rpx;
		font-size: 24rpx;
	}

	.goods-class-item-picture {
		border-radius: 50%;
		margin-bottom: 10rpx;
		box-shadow: 0 0 0 1px #e5e5e5;
	}

	.goods-class-item-picture--active {
		/* border: 1px solid #24A3FF; */
		box-shadow: 0 0 0 1px #24a3ff;
	}

	.goods-class-item:nth-child(n + 2) {
		margin-left: 20rpx;
	}

	.sort-nav {
		height: 80rpx;
		border-radius: 10px;
	}

	.sort-tag {
		height: 100%;
		flex: 2;
	}

	.sort-type {
		flex: 1;
		position: relative;
	}

	.sort-type::before {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		content: '';
		display: block;
		width: 1rpx;
		height: 1em;
		background-color: #888888;
	}

	.search-container {
		/* height: 100vh; */
		/* background-color: #101010; */
	}

	.search-content {
		padding-left: 24rpx;
		padding-bottom: 20rpx;
	}

	.search-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		height: 100vh;
		/* height: 200rpx; */
		/* background-color: #01D171; */
	}

	.search-title {
		padding: 26rpx 0;
	}

	.search-words {
		line-height: 52rpx;
		height: 52rpx;
		padding: 0 24rpx;
		background-color: #f5f5f5;
	}

	.goods-list-wrap {
		padding: 20rpx 0;
		overflow: hidden;
	}

	.goods-container-double {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods-item-double {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 345rpx;
		/* height: 540rpx; */
		border-radius: 7px;
		background-color: #ffffff;
		overflow: hidden;
	}

	.goods-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 14rpx;
	}

	.lease-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 38rpx;
		min-width: 38rpx;
		min-height: 28rpx;
		flex: 1;
		/* margin-right: 10rpx; */
		border-radius: 4rpx;
		font-size: 22rpx;
		background-color: #01d171;
		color: #ffffff;
	}

	.sale-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 38rpx;
		min-width: 38rpx;
		min-height: 28rpx;
		flex: 1;
		/* margin-right: 10rpx; */
		border-radius: 4rpx;
		font-size: 22rpx;
		background-color: #1e8af4;
		color: #ffffff;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.goods-tag {
		/* padding: 8rpx 10rpx; */
		/* margin-right: 20rpx; */
		/* border-radius: 4px; */
		/* font-size: 22rpx; */
		/* background-color: rgba(36, 163, 255, 0.1); */
		/* color: #24a3ff; */
		color: #F79C0C;
		font-size: 24rpx;
	}

	.goods-price {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		gap: 20rpx;
	}

	.user-btn {
		--color: blue;
		line-height: 60rpx;
		border: 2rpx solid var(--color);
		border-radius: 60rpx;
		flex: 1;
		color: var(--color);
		box-sizing: border-box;
		text-align: center;
	}

	.goods-container-one {
		display: flex;
		flex-direction: column;
	}

	.goods-item-one {
		box-sizing: border-box;
		display: flex;
		padding: 20rpx;
		border-radius: 7px;
		background-color: #ffffff;
	}

	.goods-item-one,
	.goods-item-double {
		margin-bottom: 20rpx;
	}

	.tag-box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: var(--tag-box-width);
		z-index: 2;
	}
</style>